<template>
  <div v-if="!isMain && isView" class="view-equip-detail-wrap view-plan-detail">
    <div style="display: flex; align-items: center; width: 71%; height: 59px; background-color: #fff">
      <px-button type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
      <div style="margin-right: 8px; margin-left: 16px; font-size: 20px; font-weight: bold; color: rgb(0 0 0 / 90%)">
        {{ formValue.improveId }}
      </div>
      <!-- 未开始 -->
      <span
        v-if="formValue.improveStatus === 'UNDO'"
        style="
          display: inline-block;
          height: 22px;
          padding: 0 8px;
          line-height: 22px;
          color: #f59e0b;
          text-align: center;
          background: #fef5e6;
          border: 1px solid #fce2b6;
          border-radius: 4px;
        "
      >
        未开始
      </span>
      <!-- 进行中 -->
      <span
        v-else-if="formValue.improveStatus === 'DOING'"
        style="
          display: inline-block;
          height: 22px;
          padding: 0 8px;
          line-height: 22px;
          color: #3b82f6;
          text-align: center;
          background: #ecf5ff;
          border: 1px solid #c6e2ff;
          border-radius: 4px;
        "
      >
        进行中
      </span>
      <!-- 已完成 -->
      <span
        v-else-if="formValue.improveStatus === 'DONE'"
        style="
          display: inline-block;
          height: 22px;
          padding: 0 8px;
          line-height: 22px;
          color: #10b981;
          text-align: center;
          background: #e8f8f3;
          border: 1px solid #b7ead9;
          border-radius: 4px;
        "
      >
        已完成
      </span>
    </div>
    <div class="flex">
      <px-scrollbar ref="scrollbarRef" class="view-equip-detail" style="padding: 0" @scroll="handleScroll">
        <div ref="basicsRef">
          <EditDropDown dropdownTitle="基本信息">
            <template v-slot:content>
              <div class="view-equip-wrap">
                <div class="view-equip-content">
                  <div class="view-equip-item half">
                    <div class="label">改善编号</div>
                    <div class="text">{{ formValue?.improveId || "-" }}</div>
                  </div>
                  <div class="view-equip-item half">
                    <div class="label">改善内容</div>
                    <div class="text">{{ formValue?.improveName || "-" }}</div>
                  </div>
                </div>
                <div class="view-equip-content">
                  <div class="view-equip-item half">
                    <div class="label">科室</div>
                    <div class="text">{{ formValue.className || "-" }}</div>
                  </div>
                  <div class="view-equip-item half">
                    <div class="label">系统</div>
                    <div class="text">{{ formValue?.systemName || "-" }}</div>
                  </div>
                </div>
                <div class="view-equip-content">
                  <div class="view-equip-item half">
                    <div class="label">改善来源</div>
                    <div class="text">{{ formValue?.improveResourceTitle || "-" }}</div>
                  </div>
                  <div class="view-equip-item half">
                    <div class="label">关联单号</div>
                    <div class="text">{{ formValue?.relationNumber || "-" }}</div>
                  </div>
                </div>
                <div class="view-equip-content">
                  <div class="view-equip-item half">
                    <div class="label">原因类型</div>
                    <div class="text">{{ formValue?.reasonTypeTitle || "-" }}</div>
                  </div>
                  <div class="view-equip-item half">
                    <div class="label">改善必要性</div>
                    <div class="text">{{ formValue?.necessaryLevelTitle || "-" }}</div>
                  </div>
                </div>
                <div class="view-equip-content">
                  <div class="view-equip-item half">
                    <div class="label">适用范围</div>
                    <div class="text">{{ formValue.applicableScope || "-" }}</div>
                  </div>
                  <div class="view-equip-item half">
                    <div class="label">新建厂follow</div>
                    <div class="text">{{ formValue?.newFactoryFlagTitle || "-" }}</div>
                  </div>
                </div>
                <div class="view-equip-content">
                  <div class="view-equip-item half">
                    <div class="label">改善状态</div>
                    <div class="text">{{ formValue.improveStatusTitle || "-" }}</div>
                  </div>
                  <div class="view-equip-item half">
                    <div class="label">改善人</div>
                    <div class="text">{{ formValue.improveUser || "-" }}</div>
                  </div>
                </div>
              </div>
            </template>
          </EditDropDown>
        </div>
        <div ref="improveViewRef">
          <EditDropDown dropdownTitle="问题详情">
            <template v-slot:content>
              <div class="view-equip-wrap">
                <div class="view-equip-content">
                  <div class="view-equip-item plus">
                    <div class="label">问题描述</div>
                    <div class="text">{{ formValue?.problemDesc || "-" }}</div>
                  </div>
                </div>
                <div class="view-equip-content">
                  <div class="view-equip-item plus">
                    <div class="label">根本原因</div>
                    <div class="text">{{ formValue?.rootCause || "-" }}</div>
                  </div>
                </div>
                <div class="view-equip-content">
                  <div class="view-equip-item plus">
                    <div class="label">影响范围</div>
                    <div class="text">{{ formValue?.influenceScope || "-" }}</div>
                  </div>
                </div>
              </div>
              <div class="img">
                <div class="imgBox" />
                <div class="imgSize">附件</div>
              </div>
              <div class="view-equip-content" style="margin-bottom: 24px">
                <FileUpload
                  v-if="!isMain && isView"
                  fileType="view"
                  :fileData="{ moduleName: moduleName }"
                  :fileList="formValue.problemAttachmentLists"
                />
              </div>
            </template>
          </EditDropDown>
        </div>
        <div ref="improveTypeRef">
          <EditDropDown dropdownTitle="改善方案">
            <template v-slot:content>
              <div class="view-equip-wrap">
                <div class="view-equip-content">
                  <div class="view-equip-item half">
                    <div class="label">是否影响其他部门</div>
                    <div class="text">{{ formValue?.influenceOtherFlag || "-" }}</div>
                  </div>
                  <div class="view-equip-item half">
                    <div class="label">风险作业等级</div>
                    <div class="text">{{ formValue?.riskLevel || "-" }}</div>
                  </div>
                </div>
                <div class="view-equip-content">
                  <div class="view-equip-item plus">
                    <div class="label">方案简述</div>
                    <div class="text">{{ formValue?.planDesc || "-" }}</div>
                  </div>
                </div>

                <div class="view-equip-content">
                  <div class="view-equip-item plus">
                    <div class="label">实施影响</div>
                    <div class="text">{{ formValue?.implementEffect || "-" }}</div>
                  </div>
                </div>
                <div class="view-equip-content">
                  <div class="view-equip-item plus">
                    <div class="label">方案实施计划</div>
                    <div class="text">{{ formValue?.implementTime || "-" }}</div>
                  </div>
                </div>
                <div class="view-equip-content">
                  <div class="view-equip-item plus">
                    <div class="label">效果预测</div>
                    <div class="text">{{ formValue?.effectPrediction || "-" }}</div>
                  </div>
                </div>
              </div>
              <div class="img">
                <div class="imgBox" />
                <div class="imgSize">方案详情</div>
              </div>
              <div class="auto-height-box">
                <!-- 内容可以是任何元素 -->
                <div class="box editor-content-view w-e-text-container" v-html="formValue?.planDetail" />
              </div>
              <div class="img">
                <div class="imgBox" />
                <div class="imgSize">附件</div>
              </div>
              <div class="view-equip-content" style="margin-bottom: 24px">
                <FileUpload
                  v-if="!isMain && isView"
                  fileType="view"
                  :fileData="{ moduleName: moduleName }"
                  :fileList="formValue.planAttachmentLists"
                />
              </div>
            </template>
          </EditDropDown>
        </div>
        <div ref="improveCostRef">
          <EditDropDown dropdownTitle="改善成本">
            <template v-slot:content>
              <div class="view-equip-wrap">
                <div class="view-equip-content">
                  <div class="view-equip-item half">
                    <div class="label">是否增加费用</div>
                    <div class="text">{{ formValue?.increasedCostFlagTitle || "-" }}</div>
                  </div>
                  <div class="view-equip-item half">
                    <div v-if="formValue.increasedCostFlag === 'Y'" class="label">预估金额</div>
                    <div class="text">{{ formValue?.estimatedAmount || "-" }}</div>
                  </div>
                </div>
              </div>
              <div class="img">
                <div class="imgBox" />
                <div class="imgSize">改善成本</div>
              </div>
              <div class="auto-height-box">
                <!-- 内容可以是任何元素 -->
                <div class="box editor-content-view w-e-text-container" v-html="formValue?.improveCost" />
              </div>
              <div class="img">
                <div class="imgBox" />
                <div class="imgSize">附件</div>
              </div>
              <div class="view-equip-content" style="margin-bottom: 24px">
                <FileUpload
                  v-if="!isMain && isView"
                  fileType="view"
                  :fileData="{ moduleName: moduleName }"
                  :fileList="formValue.costAttachmentLists"
                />
              </div>
            </template>
          </EditDropDown>
        </div>
        <div ref="improveEvaluateRef">
          <EditDropDown dropdownTitle="改善评价">
            <template v-slot:content>
              <div class="view-equip-wrap">
                <div class="view-equip-content">
                  <div class="view-equip-item plus">
                    <div class="label">改善评价</div>
                    <div class="text">{{ formValue?.effectEvaluate || "-" }}</div>
                  </div>
                </div>
              </div>
              <div class="img">
                <div class="imgBox" />
                <div class="imgSize">附件</div>
              </div>
              <div class="view-equip-content" style="margin-bottom: 24px">
                <FileUpload
                  v-if="!isMain && isView"
                  fileType="view"
                  :fileData="{ moduleName: moduleName }"
                  :fileList="formValue.evaluateAttachmentLists"
                />
              </div>
            </template>
          </EditDropDown>
        </div>
      </px-scrollbar>
      <WidgetRouter :router-list="routerList" :scrollbar-ref="scrollbarRef" :scroll-top="scrollTop" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { viewImprove } from "@/api/equip/improve";
import FileUpload from "@/components/Upload/FileUpload.vue";
import EditDropDown from "@/views/all/equip/components/EditDropDown.vue";
import { WidgetRouter } from "@/views/erc/inspect/components/index";
import { debounce } from "@pureadmin/utils";
import { computed, onBeforeMount, reactive, ref, toRefs, watch } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable"]);
// 父级传过来的值
const props = defineProps([
  "isMain",
  "isView",
  "missingId",
  "userId",
  "missingLevelList",
  "missingTypeList",
  "missingResourceList",
  "reportUserList",
  "rectifyStatusList"
]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
// 页面本身的值
const state = reactive<any>({
  formValue: {
    problemAttachmentLists: [], //问题附件
    planAttachmentLists: [], //方案附件
    costAttachmentLists: [], //成本附件
    evaluateAttachmentLists: [] //评价附件
  },
  rectifyVisible: false,
  moduleName: ""
});
const { formValue, rectifyVisible, moduleName } = toRefs(state);
//右侧滚动导航
const scrollbarRef = ref(null);
const routerList = ref([]);
const scrollTop = ref();
//折叠面板ref
const widgetRef = ref();
const basicsRef = ref(null);
const improveViewRef = ref(null);
const improveTypeRef = ref(null);
const improveCostRef = ref(null);
const improveEvaluateRef = ref(null);
// 监视isMain和isView值
watch(isMain, val => {
  if (!val && props.isView) {
    getDetail();
  } else {
    formValue.value = {};
  }
});
const scrollInit = () => {
  let routerName = "基本信息,问题详情,改善方案,改善成本,改善评价";
  let routerRefs = [basicsRef, improveViewRef, improveTypeRef, improveCostRef, improveEvaluateRef];
  routerList.value = routerName.split(",").map((item, index) => ({ ref: routerRefs[index], name: item }));
};
//右侧滚动导航相关函数
const handleScroll = debounce(({ scrollTop: curScrollTop }) => {
  scrollTop.value = curScrollTop;
}, 200);
onBeforeMount(() => {
  scrollInit();
});
// 获取详情
const getDetail = async () => {
  formValue.value.problemAttachmentLists = []; //问题附件
  formValue.value.planAttachmentLists = []; //方案附件
  formValue.value.costAttachmentLists = []; //成本附件
  formValue.value.evaluateAttachmentLists = []; //评价附件
  const params = {
    improveId: props.missingId
  };
  const data: any = await viewImprove(params);
  formValue.value = data;
  formValue.value.problemAttachmentLists = data.problemAttachmentList || [];
  formValue.value.planAttachmentLists = data.planAttachmentList || [];
  formValue.value.costAttachmentLists = data.costAttachmentList || [];
  formValue.value.evaluateAttachmentLists = data.evaluateAttachmentList || [];
};
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
  emits("queryTable");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
@import url("@/views/erc/inspect/scss/view-detail.scss");
// @import url("@/views/erc/scss/view-detail.scss");
.imgBox {
  width: 3px;
  height: 16px;
  margin-right: 9px;
  background: #3b82f6;
  border-radius: 0 100px 100px 0;
}

.view-plan-detail {
  display: block;
}

.view-equip-detail {
  height: calc(100vh - 146px);
}

.flex {
  display: flex;
}

.img {
  display: flex;
  align-items: center;

  /* 垂直居中 */
  height: 22px;
  margin-top: 15px;

  /* 大盒子的高度 */
  margin-bottom: 8px;
  font-size: 14px;
}

.imgSize {
  height: 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: rgb(0 0 0 / 80%);
}

.view-equip-wrap {
  width: 100%;
}

.view-equip-content {
  width: 100%;
}

.auto-height-box {
  display: block !important; /* 使用Flexbox布局 */
  // flex-wrap: wrap; /* 允许换行 */
  width: 100%;
}

.box {
  flex: 0 0 auto; /* 不伸缩，根据内容大小撑开宽度 */
  padding: 10px; /* 内边距 */
  margin: 5px; /* 外边距 */
  border: 1px solid #ccc; /* 盒子边框 */
}

/* table 样式 */
:deep(table) {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;

  td,
  th {
    min-width: 50px;
    height: 32px;
    padding: 3px 5px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  th {
    text-align: center;
    background-color: #f1f1f1;
    border-bottom: 2px solid #ccc;
  }
}

.editor-content-view {
  word-break: break-all;
}

/* ul ol 样式 */
:deep(ol) {
  margin: 10px 0 10px 22px;
  list-style-type: decimal;
}

:deep(ul) {
  margin: 10px 0 10px 22px;
  list-style-type: disc;
}

/* blockquote 样式 */
:deep(blockquote) {
  display: block;
  min-height: 24px;
  padding: 5px 10px;
  margin: 10px 0;
  font-size: 100%;
  line-height: 1.4;
  background-color: #f1f1f1;
  border-left: 8px solid #d0e5f2;
}

/* code 样式 */
:deep(code) {
  display: inline-block;
  *display: inline;
  padding: 3px 5px;
  margin: 0 3px;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
}

:deep(pre) code {
  display: block;
}

:deep(a) {
  // text-decoration: underline;
  color: #5592e5;
}

/*
  *  以下样式由于全局reset文件被覆盖，所以需要重新定义
  */
:deep(h5),
.h5 {
  font-size: 14px;
}

:deep(h4),
.h4 {
  font-size: 16px;
  font-weight: bold;
}

:deep(h3),
.h3 {
  font-size: 18px;
  font-weight: bold;
}

:deep(h2),
.h2 {
  font-size: 20px;
  font-weight: bold;
}

:deep(h1),
.h1 {
  font-size: 22px;
  font-weight: bold;
}

:deep(i) {
  font-style: italic;
}
:deep(.view-equip-detail .view-equip-wrap .view-equip-content .view-equip-item .label) {
  width: 150px !important;
}
</style>
